<template>
  <div class="type-wrap logo">
    <div class="fl key brand">品牌</div>
    <div class="value logos">
      <ul class="logo-list">
        <li v-for="brand in trademarkList" :key="brand.tmId"
            @click="addBrandQuery(brand)">{{ brand.tmName }}
        </li>
      </ul>
    </div>
    <div class="ext">
      <a href="javascript:void(0);" class="sui-btn">多选</a>
      <a href="javascript:void(0);">更多</a>
    </div>
  </div>
</template>
<script setup lang="ts" name="BrandAttr">

import {inject} from "vue";

defineProps<{
  trademarkList: any[],
}>()
const addBrandQuery = inject('addBrandQuery') as any
</script>
<style scoped lang="less">
@import "search-attr";

.logo-list {
  li {
    float: left;
    border: 1px solid #e4e4e4;
    margin: -1px -1px 0 0;
    width: 105px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: #e1251b;
    font-style: italic;
    font-size: 14px;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    img {
      max-width: 100%;
      vertical-align: middle;
    }
  }
}
</style>
